<template>
  <div class="contentbox">
    <div class="top">
      <div @click="uploadAvator" class="photo">
        <img v-if="avatar" :src="avatar" alt />
        <img v-else src="@/public/images/photo.png" alt />
      </div>
      <!-- <cube-upload
        ref="upload"
        v-model="files"
        :action="action"
        @files-added="addedHandler"
        @file-error="errHandler"
      >
        <div class="clear-fix">
          <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
          <cube-upload-btn :multiple="false">
            <div>
              <i class="cubeic-edit"></i>
            </div>
          </cube-upload-btn>
        </div>
      </cube-upload>-->
      <h1 v-if="login">{{username}}</h1>
      <cube-button v-else :inline="true" light @click="toLogin">登录</cube-button>
    </div>
    <ul class="bottom-ul content">
      <router-link to="/cart">
        <li>
          <i class="cubeic-danger"></i>
          <span>购物车</span>
        </li>
      </router-link>
      <li>
        <i class="cubeic-danger"></i>
        <span>常见问题</span>
      </li>
      <li>
        <i class="cubeic-person"></i>
        <span>关于我们</span>
      </li>
      <li>
        <i class="cubeic-mobile-phone"></i>
        <span>联系我</span>
      </li>
      <li v-if="login" @click="logout">
        <i class="cubeic-close"></i>
        <span>退出登陆</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import * as types from "../store/types";

import { format } from "path";
import { futimes } from "fs";
export default {
  data() {
    return {
      action: "/api/avatorupdate",
      files: []
    };
  },
  methods: {
    ...mapActions("account", [types.TO_LOGOUT]),
    toLogin() {
      this.$router.push("/login");
    },
    logout() {
      this[types.TO_LOGOUT]().then(
        res => {
          const toast = this.$createToast({
            type: "txt",
            time: 1000,
            txt: res
            // 设置回掉事件  设置会造成 Toast 无法显示
          });
          toast.show();
        },
        err => {
          const toast = this.$createToast({
            type: "txt",
            time: 1000,
            txt: "退出错误"
            // 设置回掉事件  设置会造成 Toast 无法显示
          });
          toast.show();
        }
      );
    },
    addedHandler() {
      const file = this.files[0];
      file && this.$refs.upload.removeFile(file);
    },
    errHandler(file) {
      // const msg = file.response.message
      this.$createToast({
        type: "warn",
        txt: "Upload fail",
        time: 1000
      }).show();
    },
    uploadAvator() {
      const file = document.createElement("input");
      file.type = "file";
      file.click();
      const formData = new FormData();
      file.addEventListener("change", () => {
        formData.append("file", file.files[0]);
        this.$store
          .dispatch("account/" + types.UPLOAD_AVATOR, formData)
          .then(res => {});
      });
    }
  },
  computed: {
    ...mapState("account", ["username", "login", "avatar"])
  }
};
</script>
<style lang="stylus">
.photo {
  width: 62px;
  height: 62px;
  background: url('../public/images/photo.png') center center no-repeat;
  background-size: cover;
  margin-bottom: 18px;
}

.photo img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
}

.top {
  display: flex;
  width: 100%;
  height: 225px;
  flex-direction: column;
  align-items: center;
  background: #1d8de5 url('../public/images/user_bg.png') center center no-repeat;
  background-size: cover;
  padding-top: 64px;
  box-sizing: border-box;
}

.bottom-ul li {
  i {
    padding-right: 10px;
  }

  line-height: 32px;
  font-size: 14px;
  color: #777;
  border-bottom: 1px solid #ebebeb;
}

.cube-upload {
  .cube-upload-file, .cube-upload-btn {
    margin: 0;
    height: 200px;
  }

  .cube-upload-file {
    margin: 0;

    + .cube-upload-btn {
      margin-top: -200px;
      opacity: 0;
    }
  }

  .cube-upload-file-def {
    width: 100%;
    height: 100%;

    .cubeic-wrong {
      display: none;
    }
  }

  .cube-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    > div {
      text-align: center;
    }

    i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
      font-size: 32px;
      line-height: 1;
      font-style: normal;
      color: #fff;
      background-color: #333;
      border-radius: 50%;
    }
  }
}
</style>